<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>中国地图+散点图-最终案例</title>
  </head>
  <body>
    <div id="main" style="height: 400px"></div>
    <script src="../libs/echarts-5.3.3.js"></script>
    <!-- 
      1.导入了一个中国的 geo json
      window.china_geojson = {}
    -->
    <script src="./geojson/china_geojson.js"></script>
    <script>
      window.onload = function () {
        let mapName = "中国";
        // 2.注册一下中国地图的 geo json ( 需要在setOption之前调用 )
        echarts.registerMap(mapName, { geoJSON: china_geojson });

        let myChart = echarts.init(document.getElementById("main"));

        var data = [
          { name: "北京", value: 199 },
          { name: "天津", value: 42 },
          { name: "河北", value: 102 },
          { name: "山西", value: 81 },
          { name: "内蒙古", value: 47 },
          { name: "辽宁", value: 67 },
          { name: "吉林", value: 82 },
          { name: "黑龙江", value: 123 },
          { name: "上海", value: 154 },
          { name: "江苏", value: 102 },
          { name: "浙江", value: 114 },
          { name: "安徽", value: 109 },
          { name: "福建", value: 116 },
          { name: "江西", value: 91 },
          { name: "山东", value: 119 },
          { name: "河南", value: 137 },
          { name: "湖北", value: 116 },
          { name: "湖南", value: 114 },
          { name: "重庆", value: 101 },
          { name: "四川", value: 125 },
          { name: "贵州", value: 62 },
          { name: "云南", value: 83 },
          { name: "西藏", value: 9 },
          { name: "陕西", value: 80 },
          { name: "甘肃", value: 56 },
          { name: "青海", value: 10 },
          { name: "宁夏", value: 18 },
          { name: "新疆", value: 120 },
          { name: "广东", value: 193 },
          { name: "广西", value: 59 },
          { name: "海南", value: 14 },
        ];

        var geoCoordMap = {};
        /*获取地图数据*/
        myChart.showLoading();
        // console.log(echarts.getMap(mapName));

        // 1.先拿到地图的 geo json 对象
        var mapFeatures = echarts.getMap(mapName).geoJson.features;
        mapFeatures.forEach(function (v) {
          // 地区名称
          var name = v.properties.name;
          // 地区经纬度
          geoCoordMap[name] = v.properties.cp;
        });
        myChart.hideLoading(); // 隐藏加载动画
        console.log("data=>", data);
        console.log("geoCoordMap=>", geoCoordMap);

        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: [...geoCoord, data[i].value],
              });
            }
          }
          console.log("res=>", res);
          return res;
        };

        // 2.指定图表的配置项和数据
        var option = {
          tooltip: {}, // 提示框

          // visualMap: {  // 视觉映射组件
          //   left: "20%",
          //   seriesIndex: [0],
          //   inRange: {
          //     color: ["#04387b", "#467bc0"], // 蓝绿
          //   },
          // },

          geo: {
            // 注册一个地理坐标系组件( 给散点图用 )
            map: "中国",
            roam: false,
            label: { show: false },
            aspectScale: 0.75, // 缩放地图
            itemStyle: {
              areaColor: "#023677",
              borderColor: "#1180c7",
            },
            emphasis: {
              itemStyle: { areaColor: "#4499d0" },
              label: { color: "white" },
            },
          },
          series: [
            {
              name: "中国地图",
              type: "map",
              map: "中国",
              data, // 给地图填充数据

              // 地图样式
              itemStyle: {
                areaColor: "#023677",
                borderColor: "#1180c7",
              },
              emphasis: {
                itemStyle: { areaColor: "#4499d0" },
                label: { color: "white" },
              },
              select: {
                label: { color: "white" },
                itemStyle: { areaColor: "#4499d0" },
              },
              // 地图样式
            },
            {
              name: "散点图充电桩",
              type: "effectScatter",

              // 散点图使用的坐标系: geo定义的坐标系组件
              geoIndex: 0,
              coordinateSystem: "geo", // 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。

              data: convertData(data),

              symbolSize: function (val) {
                // 设置散点大小
                return val[2] / 10;
              },

              itemStyle: {
                color: "yellow",
                shadowBlur: 10,
                shadowColor: "yellow",
              },
              tooltip: {
                // 鼠标悬停提示
                show: true,
                trigger: "item",
                formatter: function (params) {
                  console.log(params);
                  var data = params.data;
                  return `${params.seriesName} <div style="margin:5px 0px;"/> ${data.name} ${data.value[2]}`;
                },
              },
            },
          ],
        };

        myChart.setOption(option);
      };
    </script>
  </body>
</html>
